<template>
	<div class="wrap">
		<h1 class="title">公共设施管理</h1>
		<el-row :gutter="20" class="search">
			<el-col :span="6">
				<span>设备名称：</span>
				<el-input v-model.trim="name" />
			</el-col>
			<el-col :span="2">
				<el-button class="btn" @click="submitSearchPublic">
					<el-icon><Search /></el-icon>
					查询</el-button
				>
			</el-col>
			<el-col :span="2">
				<el-button class="btn" @click="resetSearchPublic">重置</el-button>
			</el-col>
			<el-col :span="2" :offset="12">
				<el-row :gutter="20">
					<el-col :span="4">
						<el-button class="btn" @click="showAddPublicDialog = true">添加设备</el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<PublicMaInfoTable :data="searchResult" :total="total" @page-change="handlePageChange" />
		<AddPublicDialog v-model:showAddPublicDialog="showAddPublicDialog" @add-res="hanldeAddPublic" />
	</div>
</template>

<script setup>
import PublicMaInfoTable from '@/components/domi_admin/PublicMaInfoTable.vue'
import AddPublicDialog from '@/components/dialog/AddPublicDialog.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getPublicOneName, getAllPublicEquiment } from '@/utils/axios/domiRequests'
import { Search } from '@element-plus/icons'

const name = ref('')
const showAddPublicDialog = ref(false)

const searchResult = ref()
const currentPage = ref(1)
const total = ref(0)

const resetSearchPublic = async () => {
	let { data } = await getAllPublicEquiment({ currentPage: currentPage.value })

	total.value = data.length
	searchResult.value = data
	name.value = ''
}

// 处理添加设备自定义事件
const hanldeAddPublic = ({ data, tota }) => {
	searchResult.value = data
	total.value = tota
}
// 处理分页的自定义事件处理函数
const handlePageChange=({data,tota})=>{
  searchResult.value=data
  if(tota)  total.value=tota

}


async function submitSearchPublic() {
	if (!name.value) return ElMessage.warning({ message: '搜索内容不能为空', duration: 1000 })
	let { data } = await getPublicOneName({ currentPage: 1, publicName: name.value })
	searchResult.value = data
	total.value = data.length
}
</script>

<style scoped lang="scss">
.wrap {
	width: 1200px;
}

.el-input {
	width: 200px;
}

.search {
	margin-bottom: 10px;
}
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}
</style>
